<template>
  <div>
    <topBar/>
    <el-row class="lgoin">
      <el-col  :span="5"  :offset="5">    <el-image :src="src"></el-image> </el-col>
      <el-col  :span="5" :offset="1">
        <el-card class="box-card">
          <h2 style="text-align: center">用户登陆</h2>
          <el-form label-position="left" label-width="80px" >
            <el-form-item label="手机号码">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="验证码">
              <el-input></el-input>
            </el-form-item>
              <el-col :span="8">
                <img src="http://www.tea7.com/Home/GetValidateCode?gui=6034.653681040443">
              </el-col>
              <el-col :span="8">
                <el-input placeholder="图片验证码"></el-input>
              </el-col>
              <el-col :span="8">
                <el-button type="primary">获取验证码</el-button>
              </el-col>
            <el-form-item  >
            <el-checkbox>我已阅读并接受 <a href="#">《服务协议》</a></el-checkbox>
          </el-form-item>
            <el-form-item  >
              <el-button type="danger">&nbsp;&nbsp;&nbsp;&nbsp;登陆 &nbsp;&nbsp;&nbsp;&nbsp;    </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  <myfooter/>
  </div>
</template>

<script>
  import topBar from '@/components/topBar'
  import myfooter from '@/components/myfooter'

  export default {
      components:{ topBar,myfooter},

      name: "index",
      data() {
        return {
          src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        }
      }
    }
</script>

<style scoped>
  .lgoin{
    margin-top: 5%;
    min-height: 680px;
  }
</style>
